<!--
 * @Author: ZhaoZhiqi
 * @Date: 2024-04-30 14:15:46
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2024-09-20 17:44:10
 * @Description: 月卡详情
 * @FilePath: \parking-mini\src\pages\vip_detail.vue
-->
<template>
    <div class="container">
        <div class="card">
            <img class="circle" :src="imgs.circle" alt="" />
            <div class="content">
                <div class="title">月卡详情</div>
                <div class="item">
                    <div class="label">月卡类型：</div>
                    <div class="value">{{ info.cardName }}</div>
                </div>
                <div class="item">
                    <div class="label">适用停车场：</div>
                    <div class="value">{{ info.dadaParkName }}</div>
                </div>
                <!-- <div class="item">
                    <div class="label">使用范围：</div>
                    <div class="value">全部区域</div>
                </div> -->
                <div class="item">
                    <div class="label">适用车牌：</div>
                    <div class="value">{{ info.carNumber }}</div>
                </div>
                <div class="item">
                    <div class="label">开始时间：</div>
                    <div class="value">{{ info.beginTime }}</div>
                </div>
                <div class="item">
                    <div class="label">结束时间：</div>
                    <div class="value">{{ info.endTime }}</div>
                </div>
                <div class="item">
                    <div class="label">月卡金额：</div>
                    <div class="value">{{ info.payAmount }}元</div>
                </div>
                <div class="item">
                    <div class="label">免费时段：</div>
                    <div class="value">全时段</div>
                </div>
                <div class="item">
                    <div class="label">姓名：</div>
                    <div class="value">{{ info.fullName }}</div>
                </div>
                <div class="item">
                    <div class="label">身份证：</div>
                    <div class="value">{{ info.idNumber }}</div>
                </div>
                <div class="item">
                    <div class="label">手机号：</div>
                    <div class="value">{{ info.phoneNumber }}</div>
                </div>
                <div v-if="info.workNumber" class="item">
                    <div class="label">工号：</div>
                    <div class="value">{{ info.workNumber }}</div>
                </div>
            </div>
            <div class="tip">*说明：月卡不可转让，有效期内每个月可更换1次车牌</div>
        </div>
        <div v-if="plateList.length && plateList[0].length && !info.isChangeCarNumber && !info.isExpire" class="button" @click="visible = true">变更车牌</div>
        <div v-else-if="!info.isChangeCarNumber && !info.isExpire" class="button" @click="link('/pages/numberplate')">暂无可变更车牌，去新增</div>

        <u-picker :show="visible" :columns="plateList" @cancel="visible = false" @confirm="confirm"></u-picker>

        <Contract :visible="contractVisible" :info="contractInfo" @close="contractVisible = false" @success="onSuccess"></Contract>
    </div>
</template>
<script>
import Contract from "../components/Contract.vue";
import { getVipDetailAPI, getPlateListAPI, updatePlateAPI, getFreeCarNumberListAPI } from "../api/api";
const app = getApp();
export default {
    components: { Contract },
    data() {
        return {
            imgs: app.globalData.imgs,
            id: "",
            carNumber: "",
            info: {},
            visible: false,
            plateList: [],

            contractVisible: false,
            contractFilePath: "",
        };
    },
    onShareAppMessage() {},
    onLoad(options) {
        let id = options.id;
        this.id = id;
    },
    onShow() {
        this.query(this.id);
    },
    computed: {
        contractInfo() {
            return {
                dadaParkName: this.info.dadaParkName,
                fullName: this.info.fullName,
                idNumber: this.info.idNumber,
                phone: this.info.phoneNumber,
                carNumber: this.carNumber,
                beginTime: this.info.beginTime ? this.info.beginTime.split(" ")[0] : "",
                endTime: this.info.endTime ? this.info.endTime.split(" ")[0] : "",
                number: this.info.number,
                price: this.info.payAmount / this.info.number,
            };
        },
    },
    methods: {
        // 路由跳转
        link(url, params) {
            uni.$u.route(url, params);
        },
        // 查询详情
        query(id) {
            getVipDetailAPI({ id }).then((res) => {
                this.info = res;
                this.getPlateList(this.info.cardId);
            });
        },
        // 查询未绑定车牌
        getPlateList(cardId) {
            getFreeCarNumberListAPI({
                cardId,
                openId: wx.getStorageSync("parking_openid"),
            }).then((res) => {
                let plateList = res || [];
                this.plateList = [plateList.filter((item) => !item.isExist).map((item) => item.carNumber)];
            });
        },
        confirm(e) {
            this.carNumber = e.value[0];
            this.visible = false;

            wx.showModal({
                title: "确定更换吗?",
                content: `确定更换为 ${this.carNumber} 吗？`,
                success: (res) => {
                    if (res.confirm) {
                        this.contractVisible = true;
                    } else if (res.cancel) {
                        console.log("用户点击取消");
                    }
                },
            });
        },
        // 获取合同url成功
        onSuccess(url) {
            this.contractVisible = false;
            this.contractFilePath = url;

            wx.showLoading({
                title: "更新中...",
            });
            updatePlateAPI({
                id: this.id,
                carNumber: this.carNumber,
                contractFilePath: url,
                phoneNumber: wx.getStorageSync("parking_phone"),
                token: wx.getStorageSync("dada_token"),
            }).then((res) => {
                wx.hideLoading();
                wx.showToast({
                    title: "更新成功",
                    icon: "success",
                });
                uni.navigateBack();
            });
        },
    },
};
</script>
<style scoped lang="scss">
.container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 50rpx;
    .card {
        position: relative;
        width: 686rpx;
        margin-left: calc((750rpx - 686rpx) / 2);
        box-shadow: 0px 3px 6px 3px rgba(0, 0, 0, 0.1);
        border-radius: 24rpx;
        padding-top: 36rpx;
        .circle {
            position: absolute;
            width: 32rpx;
            height: 32rpx;
            top: 37rpx;
            left: 37rpx;
        }
        .content {
            .title {
                padding-left: 80rpx;
                font-size: 32rpx;
                line-height: 1;
                color: #000000;
                font-weight: bold;
                margin-bottom: 30rpx;
            }
            .item {
                padding-left: 80rpx;
                font-size: 24rpx;
                color: #000000;
                margin: 30rpx 0;
                display: flex;
            }
        }
        .tip {
            margin: 0 25rpx;
            border-top: 3rpx dashed #cccccc;
            color: #d10909;
            font-size: 24rpx;
            line-height: 40rpx;
            padding: 30rpx 40rpx;
        }
    }
    .button {
        position: fixed;
        bottom: 100rpx;
        background-color: #009cff;
        color: #fff;
        width: 638rpx;
        height: 100rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50rpx;
        font-size: 30rpx;
    }
}
</style>
